/*
    创建者：shuxiaokai
    创建时间：2021-09-04 15:20
    模块名称：折叠面板
    备注：
*/
<template>
    <div class="s-collaps mb-1">
        <div class="header" :class="{ bold: bold }" @click="toggleCollapse">
            <span v-if="!disabled" class="gray-700">
                <el-icon v-if="isActive" :size="16">
                    <arrow-down />
                </el-icon>
                <el-icon v-else :size="16">
                    <arrow-right />
                </el-icon>
            </span>
            <span v-if="!$slots.title" class="ml-1">{{ title }}</span>
            <slot v-else name="title" />
        </div>
        <div v-show="isActive" class="pr-2 pl-5 gray-700">
            <slot />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue"
import { ArrowDown, ArrowRight } from "@element-plus/icons-vue"
import { $t } from "@/i18n/i18n"

const props = defineProps({
    title: {
        type: String,
        default: $t("请输入标题"),
    },
    bold: {
        type: Boolean,
        default: false,
    },
    active: {
        type: Boolean,
        default: true,
    },
    disabled: {
        type: Boolean,
        default: false,
    },
});
const isActive = ref(false);
const cancelWatch = watch(() => isActive.value, () => {
    isActive.value = props.active;
}, {
    immediate: true,
})

const toggleCollapse = () => {
    if (props.disabled) {
        return;
    }
    if (cancelWatch) {
        cancelWatch();
    }
    isActive.value = !isActive.value
}
</script>

<style lang="scss">
.s-collaps {
    &>.header {
        cursor: pointer;
        height: size(25);
        display: flex;
        align-items: center;;
        user-select: none;
        color: $gray-800;
        font-size: fz(14);
        &.bold {
            font-weight: bold;
        }
        &:hover {
            background: mix($theme-color, $white, 25%);
        }
    }
}
</style>
